<template>
  <div class="Festival">
    <navigation image_="0" title="七夕礼盒 心动有你" :scrollTop="false" :show="true" v-on:getHeight="getHeight($event)"
      id="header" :Weixin_="Weixin_" />
    <!-- 头部信息 -->
    <div class="top_title" :style="{ marginTop: Height + 'px' }">
      <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_title.png" alt="">
      <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_rule_btn.png" alt=""
        @click="activityrules = true">
      <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_flower.png" alt="">
    </div>
    <div class="body_center">
      <div class="gift_icon">
        <div class="center_list_ju">
          <div v-for="item,index in gift_list" :key="index" class="box_list">
            <div class="center_li">
              <div class="header_image_gift">
                <div>
                  <img :src="item.icon" alt="">
                </div>
              </div>
              <span>{{item.name}}</span>
              <div class="get_and">
                <div class="nohuode" v-if="item.light==0">未获得</div>
                <div class="yeshuode" v-else>已获得</div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_gift_icon">
          <div></div>
          <span>
            以上图标可从幸运礼物-七夕礼盒开出(每次3000钻)
          </span>
        </div>
        <img class="curtains" src="https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_denglong_img.png" alt="">
      </div>
      <div class="Confessionwall">
        <div class="top_wall">
          <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/confession_title.png" alt="">
        </div>
        <div class="center_pross">
          <div class="clis-poress">
            <div class="poress_list">
              <vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop" :lanesCount="4"
                :throttleGap="throttleGap">
                <template v-slot:default="slotProps">
                  <div class="header_image">
                    <img :src="slotProps.item.head_pic" alt="">
                  </div>
                  <div class="center_text">
                    {{slotProps.item.msg}}
                  </div>
                </template>
              </vue-baberrage>
            </div>
          </div>
        </div>
        <img class="flower" src="https://img.xunyinjiaoyou.com/static/activity/Festival/flower.png" alt="">
        <div class="btn_center_">
          <img v-if="medal_status != 2" src="https://img.xunyinjiaoyou.com/static/activity/Festival/medal_btn.png"
            alt="" @click="eqixiMedalGet">
          <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/confession_btn.png" alt=""
            @click="send_modlw">
        </div>
      </div>
      <div class="groupCp">
        <div class="top_wall">
          <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/cp_title.png" alt="">
        </div>
        <div class="box_center_CP">
          <div class="center_bacg">
            <div class="cp_back">
              <div class="cp_list_center">
                <span>甜蜜值: {{my_info.sweet_charm}}</span>
                <div class="cp_list">
                  <div class="my-xx">
                    <div class="header_ba_kuang">
                      <img :src="my_info.head_pic" alt="">
                    </div>
                    <div class="user_namekin">
                      <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/name_frame_purple.png" alt="">
                      <span>{{my_info.nickname | splice_}}</span>
                    </div>
                  </div>
                  <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/heart1_img.png" alt="">
                  <div class="your-xx">
                    <div v-if="my_info.to_user_id" class="header_ba_kuang">
                      <img :src="my_info.to_headpic" alt="" @click="$.open_usrt(my_info.to_user_id)">
                    </div>
                    <img v-else class="herder_jia"
                      src="https://img.xunyinjiaoyou.com/static/activity/Festival/cp_empty_img.png" alt=""
                      @click="change">
                    <div class="user_namekin">
                      <img v-if="my_info.to_user_id"
                        src="https://img.xunyinjiaoyou.com/static/activity/Festival/name_frame_purple.png" alt="">
                      <img v-else src="https://img.xunyinjiaoyou.com/static/activity/Festival/name_frame_pink.png"
                        alt="">
                      <span v-if="my_info.to_user_id">{{my_info.to_nickname | splice_}}</span>
                      <span v-else>虚位以待</span>
                    </div>
                  </div>
                </div>
                <div class="breakup" @click="break_up" v-if="my_info.to_user_id">
                </div>
              </div>
            </div>
            <div class="infor_list">
              <span>送非背包礼物可增加甜蜜值,</span>
              <span>1钻石=1甜蜜值</span>
            </div>
            <div class="xin_cording">
              <div class="press_no">
              </div>
              <div class="center_list_gift">
                <div v-for="item,index in step_list" :key="item.step" class="box_gift_icon">
                  <img v-if="item.money<=my_info.sweet_charm"
                    src="https://img.xunyinjiaoyou.com/static/activity/Festival/heart2_img.png" alt="">
                  <img v-else src="https://img.xunyinjiaoyou.com/static/activity/Festival/heart1_img_nor.png" alt="">
                  <span>{{item.money}}</span>
                  <div class="box_gift_">
                    <div class="back_img">
                      <div class="image_header_certer">
                        <img :src="item.prize_pic" alt="">
                      </div>
                      <div class="box_err">{{item.prize_name}}</div>
                    </div>
                    <span class="fs_19">{{item.prize_days}}天</span>
                    <div class="lingqu_logi">
                      <div class="over" v-if="item.status==2" @click="qixiPrizeGet1(2)"><span>已领取</span></div>
                      <div class="flow_over" v-if="item.status==1" @click="qixiPrizeGet(item.step,index)">
                        <span>领取</span>
                      </div>
                      <div class="hidden_over" v-if="item.status==0" @click="qixiPrizeGet1(1)"><span>领取</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img class="left_flower" src="https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_flower.png" alt="">
        <img class="right_denglou" src="https://img.xunyinjiaoyou.com/static/activity/Festival/cp_reward_btn.png" alt=""
          @click="model_prize=true">
      </div>

      <div class="rank_cp">
        <div class="top_wall">
          <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/rank_title.png" alt="">
        </div>
        <div class="rank_list">
          <div class="list_center_rank">
            <div class="list_data_zdy" v-for="item in rank_list" :key="item.user_id">
              <div class="rank_paiming">{{item.rank}}</div>
              <div class="rank_pmg_header">
                <div class="nan_boder" @click="$.open_usrt(item.user_id)"> <img :src="item.head_pic" alt=""></div>
                <div class="nv_boder" @click="$.open_usrt(item.to_user_id)"> <img :src="item.to_head_pic" alt=""></div>
              </div>
              <div class="nikename_mok">
                <div class="name_na_nv">
                  {{item.nickname | splice_}}&{{ item.to_nickname | splice_}}
                </div>
                <div class="Sweetness_value">
                  甜蜜值 {{item.charm | value_K}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <img class="left_flower" src="https://img.xunyinjiaoyou.com/static/activity/Festival/flower.png" alt="">
      </div>
    </div>

    <van-popup v-model="model_prize" :close-on-click-overlay="false">
      <div class="rank_prize_model">
        <div class="header_top">
          <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/popup_reward_title.png" alt="">
        </div>
        <div class="body_center">
          <div class="neihe_index">
            <div class="first_prize">
              <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/no.1.png" alt="">
              <div class="prize_box_model">
                <div v-for="item in prize.first_rank" :key="item.id">
                  <div class="bg_cen">
                    <div :class="item.icon.length==1?'lovers_frame':'lovers_frame2'">
                      <img v-for="items,index in item.icon" :key="index" :src="items" alt="">
                    </div>
                    <div class="liwu_gift_">
                      <span>{{item.name}}</span>
                    </div>
                  </div>
                  <span>{{item.value}}</span>
                  <div v-if="item.title" class="limit_xiand"><span>{{item.title}}</span></div>
                </div>
              </div>
            </div>
            <div class="first_prize">
              <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/no.2.png" alt="">
              <div class="prize_box_model">
                <div v-for="item in prize.two_rank" :key="item.id">
                  <div class="bg_cen">
                    <div :class="item.icon.length==1?'lovers_frame':'lovers_frame2'">
                      <img v-for="items,index in item.icon" :key="index" :src="items" alt="">
                    </div>
                    <div class="liwu_gift_">
                      <span>{{item.name}}</span>
                    </div>
                  </div>
                  <span>{{item.value}}</span>
                  <div v-if="item.title" class="limit_xiand"><span>{{item.title}}</span></div>
                </div>
              </div>
            </div>
            <div class="first_prize">
              <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/no.3.png" alt="">
              <div class="prize_box_model" style="margin-bottom:10px;">
                <div v-for="item in prize.three_rank" :key="item.id">
                  <div class="bg_cen">
                    <div :class="item.icon.length==1?'lovers_frame':'lovers_frame2'">
                      <img v-for="items,index in item.icon" :key="index" :src="items" alt="">
                    </div>
                    <div class="liwu_gift_">
                      <span>{{item.name}}</span>
                    </div>
                  </div>
                  <span>{{item.value}}</span>
                  <div v-if="item.title" class="limit_xiand"><span>{{item.title}}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="close" @click="model_prize = false"></div>
      </div>
    </van-popup>

    <van-popup v-model="declaration" :close-on-click-overlay="false">
      <div class="Confession">
        <div class="close_"></div>
        <div class="close_2" @click="declaration = false"></div>
        <div class="text_center_miaoshu">
          <span>输入你的告白宣言</span>
          <textarea placeholder="不超过20字" rows="2" maxlength="20" v-model="content"></textarea>
        </div>
        <div class="send_con" @click="send_bar">
          确定
        </div>
      </div>
    </van-popup>

    <van-popup v-model="activityrules" :close-on-click-overlay="false">
      <div class="Confession2">
        <div class="close_"></div>
        <div class="close_2" @click="activityrules = false"></div>
        <div class="text_center_miaoshu">
          <span>活动规则</span>
          <span>1、每收到七夕礼盒随机获取礼物，集齐全部礼物即可领取七夕专属纪念勋章与全服告白一次。</span>
          <span>2、绑定CP后，赠送非背包礼物可增加CP甜蜜值，达到对应的甜蜜值，可领取对应的奖励。</span>
          <span>3、赠送的七夕认证标签，可在语音房内聊天显示。</span>
          <span>4、甜蜜排行榜前十名均有奖品获得（具体奖品请参考榜单奖励）。</span>
          <span>5、第一名赠送的靓号格式为77520X,最后一位自选。</span>
          <span>6、<span v-if="isiOS">本活动与苹果公司无关，</span>最终解释权归声贝所有。</span>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="get_prize" :close-on-click-overlay="false">
      <div class="prize_congratulations">
        <img src="https://img.xunyinjiaoyou.com/static/activity/Festival/popup_title.png" alt="">
        <div class="prize_gift_box">
          <img :src="medal_pic" alt="">
        </div>
        <div class="btn_query" @click="get_prize = false">
          确定
        </div>
      </div>
    </van-popup>

    <van-popup v-model="isInvitation" :close-on-click-overlay="false">
      <div class="invite_model">
        <div class="box_center_invite">
          <div class="invite_body">
            <span>{{my_info.invite_nickname | splice_}}</span>想邀请你组cp得豪礼
          </div>
          <div class="btn_">
            <div class="refuse" @click="config_(0)"></div>
            <div class="accept" @click="config_(1)"></div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from "../../components/navigation";
  import {
    MESSAGE_TYPE
  } from 'vue-baberrage'; //弹幕
  export default {
    data() {
      return {
        isiOS: false,
        Height: 0,
        Weixin_: false,
        model_prize: false, //榜单奖励
        declaration: false, //告白宣言
        content: '', //宣言文字
        activityrules: false, //活动规则
        get_prize: false, //获得奖品
        medal_pic: '', //勋章img
        isInvitation: false, //是否有邀请人

        barrageIsShow: true,
        barrage_list: [],
        barrageList: [],
        barrageLoop: true,
        throttleGap: 5000,

        my_info: {
          nickname: '',
          to_nickname: '',
          invite_nickname: '',
        }, //我的cp
        gift_list: [], //集齐礼物
        step_list: [], //cp豪礼
        rank_list: [], //排名

        medal_status: '2', //
        barrage_status: '', //
        prize: {
          first_rank: [
            {
              name: "专属靓号",
              icon: ["https://img.xunyinjiaoyou.com/static/activity/Festival/lainghao.png"],
              title: '',
              id: 1,
              value: '永久'
            },
            {
              name: "七夕勋章",
              icon: ["http://img.xunyinjiaoyou.com/upload/gift/gift_svga/202208/2/0_1659408031_73705.png"],
              title: '',
              id: 3,
              value: '永久'
            },
            {
              name: "情侣头像框",
              icon: ["https://img.xunyinjiaoyou.com/static/activity/Festival/nan.png",
                "https://img.xunyinjiaoyou.com/static/activity/Festival/nv.png"
              ],
              title: '',
              id: 2,
              value: '15天'
            },

          ],
          two_rank: [{
              name: "七夕勋章",
              icon: ["http://img.xunyinjiaoyou.com/upload/gift/gift_svga/202208/2/0_1659408031_73705.png"],
              title: '',
              id: 5,
              value: '永久'
            },
            {
              name: "情侣头像框",
              icon: ["https://img.xunyinjiaoyou.com/static/activity/Festival/nan.png",
                "https://img.xunyinjiaoyou.com/static/activity/Festival/nv.png"
              ],
              title: '',
              id: 4,
              value: '7天'
            },
          ],
          three_rank: [
            {
              name: "七夕认证",
              icon: ["http://img.xunyinjiaoyou.com/upload/gift/gift_svga/202208/2/0_1659408038_24079.png"],
              title: '',
              id: 7,
              value: '15天'
            },
            {
              name: "情侣头像框",
              icon: ["https://img.xunyinjiaoyou.com/static/activity/Festival/nan.png",
                "https://img.xunyinjiaoyou.com/static/activity/Festival/nv.png"
              ],
              title: '',
              id: 6,
              value: '3天'
            },
          ],
        }
      };
    },

    components: {
      navigation,
    },
    created() {
      if (window.isWeixin) {
        this.Weixin_ = true
      } else {
        this.Weixin_ = false
      }
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      this.good_voice()
    },
    filters: {
      splice_(value) {
        let slice2 = "";
        if (value) {
          if (value.length > 5) {
            slice2 = value
            slice2 = slice2.slice(0, 4)
            return slice2 + '...';
          } else {
            return value
          }
        }
      },
      value_K(value) {
        let slice2 = "";
        if (value > 10000) {
          slice2 = value
          slice2 = slice2 / 10000
          return Math.round(slice2 * 10) / 10 + 'w';
        } else {
          return value
        }
      },
    },
    mounted() {
      document.addEventListener('visibilitychange', this.handleVisiable)
    },
    destroyed() {
      document.removeEventListener('visibilitychange', this.handleVisiable)
    },
    methods: {
      handleVisiable(e) {
        switch (e.target.visibilityState) {
          case 'prerender':
            console.log('网页预渲染，内容不可见')
            break;
          case 'hidden':
            console.log('内容不可见，处理后台、最小化、锁屏状态')
            // alert('警告！你已经离开当前答题页面');
            break;
          case 'visible':
            this.good_voice()
            console.log('处于正常打开,后台进入状态')
            break;
        }
      },
      config_(status) {
        let arys = {
          toUserId: this.my_info.invite_user_id,
          status: status,
        }; //参数
        let url = "/activity/qixiInviteConfirm";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.good_voice()
          }
          Toast(res.data.text)
        })
      },
      send_modlw() {
        if (this.barrage_status == 2) {
          Toast('全服告白已发送')
        } else {
          this.declaration = true;
        }
      },
      send_bar() {
        let that = this;
        let arys = {
          content: this.content,
        }; //参数
        let url = "/activity/qixiBarrage";
        this.$.encryption2(arys, url).then((res) => {
            if (res.data.status == 0) {
              const arr = Array.from({
                length: 0
              }, e => {
                return {
                  head_pic: that.my_info.head_pic,
                  msg: that.content,
                  time: 10,
                  type: MESSAGE_TYPE.NORMAL,
                  extraWidth: 100,
                }
              })
              this.barrageList.push(...arr)
              this.barrageList.push({
                head_pic: that.my_info.head_pic,
                msg: that.content,
                time: 10,
                type: MESSAGE_TYPE.NORMAL,
                extraWidth: 100,
              })
              this.content = "";
              this.declaration = false;

            }
            Toast(res.data.text)
          })
          .catch(() => {
            Toast('文本内容输入错误')
          })
      },
      eqixiMedalGet() {
        let arys = {}; //参数
        let url = "/activity/qixiMedalGet";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.medal_pic = res.data.result.medal_pic
            this.medal_status = 2;
            this.get_prize = true;
          } else {
            Toast(res.data.text)
          }
        })
      },
      change() {
        this.$store.commit("empty");
        this.$store.commit("change", "/Festival");
        this.$router.push("/followFriends");
      },
      break_up() {
        let that = this;
        Dialog.confirm({
            title: '分手',
            message: '确认与昵称啦啦...解除关系',
            cancelButtonText: '不分了',
            confirmButtonColor: '#0091FF'
          })
          .then(() => {
            // on confirm
            that.Cancel_qixi()
          })
          .catch(() => {
            // on cancel
          });
      },
      //分手
      Cancel_qixi() {
        let arys = {
          toUserId: this.my_info.to_user_id
        }; //参数
        let url = "/activity/qixiCancel";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.good_voice()
          }
          Toast(res.data.text)
        })
      },
      getHeight(height) {
        this.Height = height;
      },
      // 领取cp奖励
      qixiPrizeGet(step, index) {
        let arys = {
          step
        }; //参数
        let url = "/activity/qixiPrizeGet";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.step_list[index].status = 2;
            this.medal_pic = res.data.result.gift_pic
            this.get_prize = true;
          } else {
            Toast(res.data.text)
          }
        })
      },
      qixiPrizeGet1(index) {
        if (index == 1) {
          Toast('甜蜜值未达标，不可领取')
        } else(
          Toast('奖品不可重复领取')
        )
      },
      good_voice() {
        let arys = {}; //参数
        let url = "/activity/qixiIndex";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.my_info = res.data.result.my_info; //我的cp
            if (res.data.result.my_info.invite_user_id > 0) {
              this.isInvitation = true;
            } else {
              this.isInvitation = false;
            }
            this.gift_list = res.data.result.gift_list; //集齐礼物
            this.step_list = res.data.result.step_list; //cp豪礼
            this.rank_list = res.data.result.rank_list; //排名


            this.medal_status = res.data.result.medal_status; //
            this.barrage_status = res.data.result.barrage_status; //
            this.barrage_list = res.data.result.barrage_list;
            this.barrage_list.forEach((v) => {
              this.barrageList.push({
                head_pic: v.head_pic,
                msg: v.content,
                time: 10,
                type: MESSAGE_TYPE.NORMAL,
                extraWidth: 100,
              });
            });
            // console.log('请求数据');
          }
        })
      },
    }
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .Festival {
    width: 100vw;
    background: #3F3D6C;

    .top_title {
      width: 100vw;
      .px(948, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_banner.png") no-repeat;
      background-size: contain;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;

      >img:nth-of-type(1) {
        position: absolute;
        .px(818);
        .px(280, height);
        pointer-events: none;
      }

      >img:nth-of-type(2) {
        position: absolute;
        .px(12, right);
        .px(80);
        .px(142, height);
        .px(158, bottom);
      }

      >img:nth-of-type(3) {
        position: absolute;
        .px(0, left);
        .px(232);
        .px(314, height);
        .px(-198, bottom);
        z-index: 1;
        pointer-events: none;
      }
    }

    .body_center {
      width: 100vw;
      position: relative;
      .px(-30, top);

      .gift_icon {
        width: 100vw;
        .px(484, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_frame.png") no-repeat;
        background-size: contain;
        overflow: hidden;
        position: relative;

        .center_list_ju {
          .px(710);
          .px(244, height);
          margin: @auto;
          .px(100, margin-top);
          display: flex;
          justify-content: space-between;
          overflow-x: scroll;
          overflow-y: hidden;

          .box_list {
            .px(162);
            .px(240, height);
            background: #C4CDFF;
            border: 2px solid #fff;
            .px(5, border-radius);
            display: flex;
            align-items: center;
            justify-content: center;

            .center_li {
              .px(158);
              .px(236, height);
              border: 1px solid #a1affc;
              .px(5, border-radius);
              display: flex;
              flex-direction: column;
              align-items: center;

              .header_image_gift {
                .px(152);
                .px(146, height);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                .px(6, margin-top);
                background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/qixi_gift_frame.png") no-repeat;
                background-size: cover;

                >div {
                  .px(122);
                  .px(122, height);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 50%;

                  >img {
                    .px(118);
                    .px(118, height);
                    border-radius: 50%;
                  }
                }
              }

              >span {
                .fs(24);
                font-family: PingFang SC;
                font-weight: 400;
                color: #3D53F1;
              }

              .get_and {

                >div {
                  .px(100);
                  .px(40, height);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-family: PingFang SC;
                  font-weight: 400;
                  .fs(24);
                  .px(30, border-radius);
                  padding: 1px 2px;
                  transform: scale(.8);
                }

                .nohuode {
                  color: #FB0972;
                  background: #FEE8DF70;
                }

                .yeshuode {
                  color: #3D53F1;
                  background: #00000000;
                }
              }

            }
          }
        }

        .center_gift_icon {
          .px(686);
          .px(64, height);
          background: linear-gradient(0deg, #FFF0D5 1%, #FFF6EF 100%);
          .px(5, border-radius);
          margin: @auto;
          .px(20, margin-top);
          text-align: center;
          .px(64, line-height);

          .fs(24);
          font-family: PingFang SC;
          font-weight: 400;
          color: #081576;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;

          >div {
            position: absolute;
            .px(678);
            .px(56, height);
            background: linear-gradient(0deg, #FFF0D5 1%, #FFF6EF 100%);
            border: 1px solid rgba(211, 162, 111, 0.5100);
            .px(5, border-radius);
          }

          >span {
            z-index: 1;
          }
        }

        .curtains {
          width: 100vw;
          .px(452, height);
          position: absolute;
          .px(30, top);
          // z-index: 10;
          pointer-events: none;
        }
      }

    }

    .Confessionwall {
      .px(780);
      .px(574, height);
      position: relative;
      margin: @auto;
      .px(18, margin-top);
      display: flex;
      justify-content: center;

      .top_wall {
        width: 96vw;
        .px(120, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/confession_title_frame.png") no-repeat;
        background-size: contain;
        position: absolute;
        .px(0, top);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        >img {
          .px(538);
          .px(62, height);
        }
      }

      .center_pross {
        .px(780);
        .px(514, height);
        position: absolute;
        .px(60, top);
        background: #97A7FF;
        border: 1px solid #FEE0BD;

        .clis-poress {
          .px(740);
          .px(508, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/confession_text_bg.png") no-repeat;
          background-size: cover;
          margin: @auto;
          display: flex;
          justify-content: center;

          .poress_list {
            .px(720);
            .px(444, height);
            margin: @auto;
            position: absolute;
            .px(20, bottom);
            display: flex;
            align-items: center;

            /deep/ .baberrage-item {
              margin: 10px 0;
              display: flex;
              align-items: center;
              background: #E6EAFF;
              .px(60, border-radius);
              .fs(26);
              font-family: PingFang SC;
              font-weight: 400;
              color: #4057FD;
              padding: 0;

            }

            /deep/ .header_image {
              .px(60);
              .px(60, height);
              border: 1px solid #FFFFFF;
              background: #EFE3F8;
              box-shadow: 0px 0px 8px 0px rgba(99, 8, 223, 0.5900);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                .px(56);
                .px(56, height);
                border-radius: 50%;
              }
            }

            /deep/ .center_text {
              padding: 0 10px 0 8px;
            }

          }
        }
      }

      .flower {
        position: absolute;
        .px(222);
        .px(314, height);
        .px(-60, top);
        .px(-20, right);
        z-index: 11;
        pointer-events: none;
      }

      .btn_center_ {
        .px(750);
        .px(122, height);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 10;
        position: absolute;
        .px(-50, bottom);

        >img {
          .px(344);
          .px(122, height);
        }
      }
    }

    .groupCp {
      .px(780);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: @auto;
      .px(80, margin-top);
      position: relative;

      .top_wall {
        width: 96vw;
        .px(120, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/confession_title_frame.png") no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        >img {
          .px(538);
          .px(70, height);
        }
      }

      .box_center_CP {
        .px(780);
        // .px(941, height);
        margin: @auto;
        .px(-60, margin-top);
        background: #97A7FF;
        border: 1px solid #FEE0BD;

        .center_bacg {
          .px(740);
          // .px(950, height);
          background: #E7EBFF;
          margin: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          .px(20, padding-bottom);
          .px(20, margin-bottom);

          .cp_back {
            width: 99vw;
            .px(416, height);
            .px(78, margin-top);
            background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/cp_bg.png") no-repeat;
            background-size: cover;

            .cp_list_center {
              .px(688);
              .px(410, height);
              margin: @auto;
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;

              >span {
                .px(38, padding-top);
                .fs(30);
                font-family: PingFang SC;
                font-weight: bold;
                color: #FBF8FB;
                z-index: 1;
                // text-shadow: 2px 2px pink;
                text-shadow: #ce7ccb 0 0 4px;
              }

              .cp_list {
                width: 72vw;
                margin: @auto;
                display: flex;
                justify-content: center;

                >div {
                  .px(164);
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .herder_jia {
                    .px(168);
                    .px(168, height);
                  }

                  .header_ba_kuang {
                    .px(164);
                    .px(164, height);
                    border-radius: 50%;
                    border: 1px solid #978BEF;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    >img {
                      .px(150);
                      .px(150, height);
                      border-radius: 50%;
                    }

                  }

                  .user_namekin {
                    .px(164);
                    .px(54, height);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    .px(-20, top);
                    transform: scale(0.9);

                    >img {
                      .px(164);
                      .px(54, height);
                      position: absolute;
                    }

                    span {
                      .fs(24);
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #FBF8FB;
                      z-index: 1;
                    }
                  }
                }

                >img {
                  .px(158);
                  .px(146, height);
                }
              }

              .breakup {
                position: absolute;
                .px(16, top);
                .px(26, left);
                .px(88);
                .px(44, height);
                background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/cp_bye_btn.png") no-repeat;
                background-size: cover;
                z-index: 10;

              }
            }
          }

          .infor_list {
            width: 78vw;
            margin: @auto;
            .px(22, margin-top);
            .px(10, margin-bottom);
            .fs(30);
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            color: #7A8CFD;

            >span:nth-of-type(2) {
              color: #FB4DC0;
            }
          }

          .xin_cording {
            .px(704);
            display: flex;
            position: relative;

            .press_no {
              .px(704);
              .px(18, height);
              background: #7E91FE;
              .px(10, border-radius);
              position: absolute;
              top: 6%;

            }

            .center_list_gift {
              .px(704);
              display: flex;

              .box_gift_icon {
                .px(140);
                display: flex;
                z-index: 1;
                flex-direction: column;
                align-items: center;

                >img {
                  .px(82);
                  .px(72, height);
                }

                >span {
                  .fs(28);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #6B8AC1;
                }

                .box_gift_ {
                  .px(140);
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  .px(10, margin-top);


                  .back_img {
                    .px(140);
                    .px(184, height);
                    background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/cp_gift_frame.png") no-repeat;
                    background-size: contain;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .image_header_certer {
                      .px(20, margin-top);
                      width: 100%;
                      .px(90, height);
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      img {
                        .px(96);
                        // .px(96, height);
                        // .px(20, margin-top);
                      }
                    }

                    .box_err {
                      .px(150);
                      .px(50, height);
                      .px(30, border-radius);
                      background: #647AFA;
                      text-align: center;
                      .px(50, line-height);
                      .fs(24);
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #FFFFFF;
                      transform: scale(0.7);
                    }
                  }

                  .fs_19 {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #647AFA;
                    transform: scale(.8);
                  }

                  .lingqu_logi {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .px(10, margin-top);

                    .over {
                      .px(88);
                      .px(38, height);
                      background: #B5BFFB;
                      .px(25, border-radius);
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      span {
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        .fs(24);
                        transform: scale(.8);
                      }
                    }

                    .flow_over {
                      .px(98);
                      .px(48, height);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/get_select_btn.png") no-repeat;
                      background-size: cover;

                      span {
                        .fs(24);
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        transform: scale(.8);
                      }
                    }

                    .hidden_over {
                      .px(98);
                      .px(48, height);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/get_nor_btn.png") no-repeat;
                      background-size: cover;

                      span {
                        .fs(24);
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        transform: scale(.8);
                      }
                    }
                  }
                }
              }
            }


          }


        }
      }

      .left_flower {
        .px(236);
        .px(314, height);
        position: absolute;
        .px(-22, left);
        .px(0, top);
        z-index: 1;
      }

      .right_denglou {
        .px(160);
        .px(254, height);
        position: absolute;
        .px(-22, right);
        .px(40, top);
        z-index: 1;
      }
    }

    .rank_cp {
      .px(780);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: @auto;
      .px(30, margin-top);
      position: relative;

      .top_wall {
        width: 96vw;
        .px(120, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/confession_title_frame.png") no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        >img {
          .px(538);
          .px(62, height);
        }
      }

      .rank_list {
        .px(780);
        margin: @auto;
        .px(-60, margin-top);
        background: #97A7FF;
        border: 1px solid #FEE0BD;
        .px(400, min-height);


        .list_center_rank {
          .px(740);
          margin: @auto;
          background: #E7EBFF;
          .px(20, margin-bottom);
          overflow: hidden;

          >div:first-child {
            .px(80, margin-top)
          }

          >div:last-child {
            .px(66, margin-bottom)
          }

          .list_data_zdy {
            .px(718);
            .px(174, height);
            margin: @auto;
            .px(10, margin-bottom);
            background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/rank_frame.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;

            .rank_paiming {
              .px(80);
              display: flex;
              align-items: center;
              justify-content: center;
              .fs(38);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }

            .rank_pmg_header {
              .px(20, margin-left);
              .px(190);
              .px(100, height);
              display: flex;
              align-items: center;
              justify-content: center;

              .nan_boder {
                border: 1px solid #667cf9;
                z-index: 2;
              }

              .nv_boder {
                border: 1px solid #f985d4;
              }

              >div {
                .px(100);
                .px(100, height);
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                .px(-10, margin-left);
                .px(-10, margin-right);

                img {
                  .px(98);
                  .px(98, height);
                  border-radius: 50%;
                }
              }
            }

            .nikename_mok {
              display: flex;
              flex-direction: column;
              justify-content: center;
              .px(100, height);
              .px(26, margin-left);

              >div {
                padding: 2px 0;
              }

              .name_na_nv {
                font-family: PingFang SC;
                font-weight: 400;
                color: #4F45B8;
                .fs(28);
              }

              .Sweetness_value {
                .fs(28);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FB4DC0;
              }
            }
          }
        }
      }

      .left_flower {
        .px(234);
        .px(314, height);
        position: absolute;
        .px(-22, right);
        .px(0, top);
        z-index: 1;
      }
    }
  }

  /deep/ .van-popup {
    overflow: initial;
    background: 00000000;
  }

  .rank_prize_model {
    .px(740);
    display: flex;
    position: relative;
    flex-direction: column;

    .header_top {
      .px(740);
      .px(120, height);
      margin: @auto;
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_text_frame.png") no-repeat;
      background-size: contain;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;

      img {
        .px(478);
        .px(62, height);
      }
    }

    .body_center {
      .px(715);
      .px(524, height);
      background: #97A7FF;
      border: 1px solid #FEE0BD;
      margin: @auto;
      .px(-20, margin-top);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .neihe_index {
        .px(680);
        .px(498, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/pupup_bg.png") no-repeat;
        background-size: contain;
        overflow-y: scroll;

        .first_prize {
          .px(60, padding-top);
          .px(1, padding-bottom);
          .px(600);
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: @auto;

          >img {
            .px(36, height);
          }

          .prize_box_model {
            width: 100%;
            display: flex;
            justify-content: center;
            .px(38, margin-top);
            position: relative;

            .limit_xiand {
              position: absolute;
              background: #8C3DDC;
              .px(4, border-radius);
              .px(54);
              .px(30, height);
              .px(-10, right);
              .px(10, top);
              display: flex;
              justify-content: center;
              .px(30, line-height);

              span {
                .fs(24);
                transform: scale(.7);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                white-space: nowrap;
              }
            }

            >div {
              .px(130);
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              .px(30, margin-left);
              .px(30, margin-right);
              position: relative;

              .bg_cen {
                width: 100%;
                .px(184, height);
                background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_gift_frame.png") no-repeat;
                background-size: contain;
                display: flex;
                flex-direction: column;
                align-items: center;

                // justify-content: center;
                .lovers_frame {
                  width: 88%;
                  .px(82, height);
                  margin: @auto;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .px(34, margin-top);
                  .px(8, margin-bottom);
                  position: relative;

                  >img {
                    .px(86);
                    // .px(86, height);
                    // width: fit-content;
                    flex-shrink: 0;
                  }

                }

                .lovers_frame2 {
                  width: 88%;
                  .px(82, height);
                  margin: @auto;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .px(34, margin-top);
                  .px(8, margin-bottom);
                  position: relative;

                  >img:nth-of-type(1) {
                    .px(82);
                    .px(82, height);
                    // height: fit-content;
                    position: absolute;
                    .px(0, left);
                  }

                  >img:nth-of-type(2) {
                    .px(82);
                    .px(82, height);
                    // height: fit-content;
                    position: absolute;
                    .px(0, right);
                  }
                }



                .liwu_gift_ {
                  background: #647AFA;
                  .px(25, border-radius);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transform: scale(.7);

                  >span {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    transform: scale(.8);
                    white-space: nowrap;
                  }

                }
              }

              >span {
                font-family: PingFang SC;
                font-weight: 500;
                color: #4259DE;
                .fs(24);
                transform: scale(.95);
              }
            }
          }
        }
      }
    }

    .close {
      .px(68);
      .px(130, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_close_icon.png") no-repeat;
      background-size: contain;
      position: absolute;
      .px(-60, top);
      .px(16, right);
      // z-index: 2;
    }
  }

  .Confession {
    .px(750);
    .px(668, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/confession_bg.png") no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;

    .close_ {
      position: absolute;
      .px(68);
      .px(130, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_close_icon.png") no-repeat;
      background-size: contain;
      .px(30, top);
      .px(56, right);
      z-index: -1;
    }

    .close_2 {
      position: absolute;
      .px(68);
      .px(130, height);
      .px(30, top);
      .px(56, right);
    }

    .text_center_miaoshu {
      width: 66%;
      height: 40%;
      margin: @auto;
      .px(136, margin-top);

      >span {
        font-family: PingFang SC;
        font-weight: 400;
        color: #7408B9;
        .fs(34);
      }

      textarea {
        width: 88%;
        .px(120, height);
        background: rgba(255, 255, 255, 0);
        resize: none;
        border: none;
        .px(66, margin-top);
        .px(20, margin-left);
        font-family: PingFang SC;
        font-weight: 400;
        color: #9494D4;
        .fs(26);
        letter-spacing: 1px;
      }

      textarea::placeholder {
        color: #9494D4;
        letter-spacing: 1px;
      }
    }

    .send_con {
      position: absolute;
      .px(66, bottom);
      .px(220);
      .px(92, height);
      display: flex;
      align-items: center;
      justify-content: center;
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/ok_btn.png") no-repeat;
      background-size: contain;

      .fs(34);
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }

  }

  .Confession2 {
    .px(750);
    .px(668, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_rule_bg.png") no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;

    .close_ {
      position: absolute;
      .px(68);
      .px(130, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_close_icon.png") no-repeat;
      background-size: contain;
      .px(30, top);
      .px(56, right);
      z-index: -1;
    }

    .close_2 {
      position: absolute;
      .px(68);
      .px(130, height);
      .px(30, top);
      .px(56, right);
    }

    .text_center_miaoshu {
      width: 80%;
      height: 60%;
      margin: @auto;
      .px(130, margin-top);
      display: flex;
      flex-direction: column;

      >span:nth-of-type(1) {
        font-family: PingFang SC;
        font-weight: 400;
        color: #7408B9;
        .fs(34);
        .px(14, padding-bottom);
      }

      span {
        .px(36, line-height);
        font-family: PingFang SC;
        font-weight: 400;
        color: #7408B9;
        .fs(24);
        transform: scale(.8);
      }
    }
  }

  .prize_congratulations {
    .px(544);
    .px(174+356+82+84, height);
    display: flex;
    flex-direction: column;
    align-items: center;

    >img {
      .px(434);
      .px(174, height);
    }

    .prize_gift_box {
      .px(542);
      .px(356, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/lihua.png") no-repeat;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        // height: max-content;
        .px(354);
        // .px(354, height);
      }
    }

    .btn_query {
      .px(84, margin-top);
      .px(208);
      .px(82, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/ok_btn.png") no-repeat;
      background-size: cover;
      text-align: center;
      .px(82, line-height);
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      .fs(34);
    }
  }

  .invite_model {
    .px(690);
    .px(670, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_invite_bg.png") no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    position: relative;

    .box_center_invite {
      position: absolute;
      .px(100, bottom);
      .px(340);
      .px(250, height);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;

      .invite_body {
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 1px;
        .fs(32);

        span {
          color: #FCE8A1;
        }
      }

      .btn_ {
        width: 88%;
        .px(104, height);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .refuse {
          .px(121);
          .px(104, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_invite_cancel_btn.png") no-repeat;
          background-size: cover;
        }

        .accept {
          .px(121);
          .px(104, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/Festival/popup_invite_ok_btn.png") no-repeat;
          background-size: cover;
        }
      }
    }

  }
</style>